

import { onMounted } from "vue"

export default function (el: string):Promise<string> {
  return new Promise((resolve) => {
    // 页面渲染完成后获取 img 元素
    onMounted(() => {
      let img: HTMLImageElement = document.querySelector(el) as HTMLImageElement
      console.log(img)
      // 需要等待 img 加载完成后再转化
      img.onload = () => {
        resolve(toBase64(img))
      }
      // toBase64 函数，将图片格式转换为 base64，该过程为异步过程
      const toBase64 = (el: HTMLImageElement): string => {
        // 创建画布 canvas 元素
        const canvas = document.createElement('canvas')
        // 设置画布大小与图片一致
        canvas.height = el.height
        canvas.width = el.width
        // 获取画布 2d 区域
        const ctx = canvas.getContext('2d')
        // 调用 drawImage 画图，资源为 el 起始坐标为(0,0) 并设置对于宽高
        ctx?.drawImage(el, 0, 0, el.width, el.height)
        // 将绘制好的画布 canvas 元素以 base64 的格式导出
        return canvas.toDataURL('image/png')
      }
    })
  })
}